<template>
  <div class="rain-game-container">
    <h1>单词雨</h1>
    <div class="rain-area">
      <div v-for="(word, idx) in words" :key="word.id" :style="{top: word.y + 'px', left: word.x + '%'}" class="rain-word">
        {{ word.text }}
      </div>
    </div>
    <input v-model="inputValue" @input="checkInput" class="rain-input" placeholder="输入单词消除..." :disabled="!isRunning" />
    <div class="rain-info">
      <span>得分：{{ score }}</span>
      <span>错词：{{ missCount }}</span>
      <span>时间：{{ timeLeft }}s</span>
    </div>
    <button @click="startGame" v-if="!isRunning" class="rain-btn">开始游戏</button>
    <button @click="startGame" v-if="isRunning && timeLeft === 0" class="rain-btn">重玩</button>
  </div>
</template>
<script>
function getRandomWord() {
  const list = ['apple','banana','cat','dog','hello','world','vue','javascript','rain','type','speed','game','code','input','score','cloud','mouse','keyboard','quick','fox','jump','blue','green','red','yellow','happy','fast','slow','star','moon','sun'];
  return list[Math.floor(Math.random() * list.length)];
}
export default {
  name: 'TypingGameRain',
  data() {
    return {
      words: [],
      inputValue: '',
      score: 0,
      missCount: 0,
      isRunning: false,
      timeLeft: 60,
      timer: null,
      dropTimer: null,
      nextId: 1
    }
  },
  methods: {
    startGame() {
      this.words = [];
      this.inputValue = '';
      this.score = 0;
      this.missCount = 0;
      this.isRunning = true;
      this.timeLeft = 60;
      this.nextId = 1;
      if (this.timer) clearInterval(this.timer);
      if (this.dropTimer) clearInterval(this.dropTimer);
      this.timer = setInterval(() => {
        this.timeLeft--;
        if (this.timeLeft <= 0) {
          this.isRunning = false;
          clearInterval(this.timer);
          clearInterval(this.dropTimer);
        }
      }, 1000);
      this.dropTimer = setInterval(this.dropWord, 600);
    },
    dropWord() {
      // 让所有单词下落
      this.words.forEach(word => word.y += 30);
      // 新单词
      if (this.isRunning && this.timeLeft > 0) {
        this.words.push({
          id: this.nextId++,
          text: getRandomWord(),
          y: 0,
          x: Math.random() * 80 + 5
        });
      }
      // 检查是否有单词落到底部
      this.words = this.words.filter(word => {
        if (word.y > 350) {
          this.missCount++;
          return false;
        }
        return true;
      });
    },
    checkInput() {
      const idx = this.words.findIndex(word => word.text === this.inputValue.trim());
      if (idx !== -1) {
        this.words.splice(idx, 1);
        this.score++;
        this.inputValue = '';
      }
    }
  },
  beforeDestroy() {
    if (this.timer) clearInterval(this.timer);
    if (this.dropTimer) clearInterval(this.dropTimer);
  }
}
</script>
<style scoped>
.rain-game-container {
  max-width: 600px;
  margin: 40px auto;
  padding: 2rem;
  background: var(--hover-color);
  border-radius: 10px;
  color: var(--text-color);
  text-align: center;
}
.rain-area {
  position: relative;
  width: 100%;
  height: 400px;
  background: #e3f2fd;
  border-radius: 10px;
  margin-bottom: 1.5rem;
  overflow: hidden;
}
.rain-word {
  position: absolute;
  font-size: 1.2rem;
  color: #1976d2;
  font-weight: bold;
  transition: top 0.3s;
}
.rain-input {
  width: 60%;
  padding: 0.5rem 1rem;
  font-size: 1.1rem;
  border: 2px solid var(--primary-color);
  border-radius: 8px;
  margin-bottom: 1rem;
}
.rain-info {
  display: flex;
  justify-content: space-around;
  margin-bottom: 1rem;
  font-size: 1.1rem;
}
.rain-btn {
  background: var(--primary-color);
  color: white;
  border: none;
  padding: 0.7rem 2rem;
  border-radius: 8px;
  font-size: 1.1rem;
  cursor: pointer;
  margin-top: 1rem;
}
.rain-btn:hover {
  background: #1565c0;
}
</style> 